
import { Card, Button, Checkbox, Form, Input } from 'antd';
import { useNavigate } from "react-router-dom";
import {observer} from "mobx-react-lite"
import userStore from "../../../store/user"
import "./index.scss"
const Login = () => {
    const navigate = useNavigate();
    //表单
    const onFinish = (values) => {
        // console.log(values.account)
        userStore.login(values.account);
        navigate("/");
    };
    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    // 跳转
    const toRegister = ()=>{
        navigate("/register")
    }
    return (
        <>
            <div className="login">
                <Card
                    title="MEC卸载管理系统"
                    style={{
                        width: 400,
                    }}
                >
                    <Form
                        name="basic"
                        labelCol={{
                            span: 8,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        style={{
                            maxWidth: 600,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        autoComplete="off"
                    >
                        <Form.Item
                            label="账号"
                            name="account"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入账号',
                                },
                            ]}
                        >
                            <Input />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入密码',
                                },
                            ]}
                        >
                            <Input.Password />
                        </Form.Item>

                        <Form.Item
                            name="remember"
                            valuePropName="checked"
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                        >
                            <Checkbox>记住我</Checkbox>
                        </Form.Item>

                        <Form.Item
                            wrapperCol={{
                                span: 24,
                            }}
                        >
                            <div className="bottom">
                                <div>
                                    <Button type="primary" htmlType="submit">
                                        登录
                                    </Button>
                                </div>
                                <div>
                                    没有账号，去<span onClick={toRegister}>注册</span>
                                </div>
                            </div>
                        </Form.Item>
                    </Form>
                </Card>
            </div>
        </>
    )
}

export default observer(Login);